<!--
 * @Descripttion:
 * @version: 1.0.0
 * @Author: htang
 * @Date: 2023-12-08 16:04:27
 * @LastEditors: htang
 * @LastEditTime: 2024-01-11 17:23:26
-->
<template>
  <a-drawer v-model:visible="visible" title="项目信息编辑" placement="right" width="30%">
    <a-form ref="formRef" :model="model" :rules="rules" :label-col="{ span: 6 }" @finish="onFinish">
      <a-form-item label="项目编号" name="projectCode">
        <a-input v-model:value="model.projectCode" placeholder="请输入项目编号" allowClear :maxlength="50" />
      </a-form-item>
      <a-form-item label="项目名称" name="projectName">
        <a-input v-model:value="model.projectName" placeholder="请输入项目名称" allowClear :maxlength="50" />
      </a-form-item>
      <a-form-item label="建立时间" name="projectTime">
        <a-date-picker
          v-model:value="model.projectTime"
          show-time
          placeholder="请选择建立时间"
          format="YYYY-MM-DD HH:mm:ss"
          valueFormat="YYYY-MM-DD HH:mm:ss"
          style="width: 100%"
        />
      </a-form-item>
      <a-form-item label="项目研发负责人" name="projectTechOwner">
        <a-input v-model:value="model.projectTechOwner" placeholder="请输入项目研发负责人" allowClear />
      </a-form-item>
      <a-form-item label="项目实施负责人" name="projectImplementOwner">
        <a-input v-model:value="model.projectImplementOwner" placeholder="请输入项目研发负责人" allowClear />
      </a-form-item>
      <a-form-item label="甲方单位" name="owner">
        <a-input v-model:value="model.owner" placeholder="请输入甲方单位" allowClear />
      </a-form-item>
      <a-form-item label="项目金额" name="projectBudget">
        <a-input v-model:value="model.projectBudget" placeholder="请输入项目金额" allowClear />
      </a-form-item>
      <a-form-item label="项目起止时间" name="projectStartTime">
        <a-range-picker v-model:value="datePicker" format="YYYY-MM-DD HH:mm:ss" valueFormat="YYYY-MM-DD HH:mm:ss" show-time style="width: 100%" />
      </a-form-item>
      <a-form-item label="操作">
        <a-button type="primary" html-type="submit">提交保存</a-button>
      </a-form-item>
    </a-form>
  </a-drawer>
</template>

<script>
import { ref, watch, nextTick, defineComponent, getCurrentInstance } from 'vue';
import { projectInfoApi, projectAddApi, projectModifyApi } from '@/api/project';
import { validateProjectCodeCode, validateProjectName, validatePassOwner } from './validate';
import moment from 'moment';
export default defineComponent({
  setup(props, { emit }) {
    let { proxy } = getCurrentInstance();

    let visible = ref(false);

    let model = ref({
      // 项目编号
      projectCode: '',
      // 项目名称
      projectName: '',
      // 建立时间
      projectTime: moment().format('YYYY-MM-DD HH:mm:ss'),
      // 项目研发负责人
      projectTechOwner: '',
      // 项目实施负责人
      projectImplementOwner: '',
      // 甲方单位
      owner: '',
      // 项目金额
      projectBudget: '',
      // 项目开始时间
      projectStartTime: '',
      // 项目结束时间
      projectEndTime: '',
    });

    let rules = ref({
      projectCode: [{ required: true, validator: validateProjectCodeCode, trigger: 'change' }],
      projectName: [{ required: true, validator: validateProjectName, trigger: 'change' }],
      projectTime: [{ required: true, message: '请选择建立时间' }],
      projectTechOwner: [{ required: true, message: '请输入项目研发负责人' }],
      projectImplementOwner: [{ required: true, message: '请输入项目实施负责人' }],
      owner: [{ required: true, validator: validatePassOwner, trigger: 'change' }],
      projectBudget: [{ required: true, message: '请输入项目金额' }],
      projectStartTime: [{ required: true, message: '请选择项目起止时间' }],
    });

    let datePicker = ref([]);

    watch(
      () => datePicker.value,
      ([a, b]) => {
        Object.assign(model.value, {
          projectStartTime: a,
          projectEndTime: b,
        });
      }
    );

    watch(
      () => visible.value,
      (v) => {
        if (!v) {
          delete model.value.id;
          proxy.$refs.formRef.resetFields();
          datePicker.value = [];
          Object.assign(model.value, {
            projectStartTime: '',
            projectEndTime: '',
          });
        }
      }
    );

    /**
     * 初始化数据
     * @param {number} id
     */
    function init(id) {
      projectInfoApi({ id }).then((res) => {
        model.value = { ...res };
        datePicker.value = [res.projectStartTime, res.projectEndTime];
      });
    }

    function onFinish() {
      let data = {
        ...model.value,
      };
      if (!data['id']) {
        projectAddApi(data).then((res) => {
          proxy.$refs.formRef.resetFields();
          visible.value = false;
          datePicker.value = [];
          emit('oks');
        });
      } else {
        projectModifyApi(data).then((res) => {
          proxy.$refs.formRef.resetFields();
          visible.value = false;
          datePicker.value = [];
          emit('oks');
        });
      }
    }

    return {
      visible,
      model,
      rules,
      datePicker,
      init,
      onFinish,
    };
  },
});
</script>